<script>
import { defineComponent, getCurrentInstance } from "vue";

export default defineComponent({
  props: {
    that: Object,
  },
  setup(props) {
    return { that: props.that };
  },
  render() {
    let that = this.that;
    return (
      <div class="styleValue seniorBoxSize">
        <span>
          宽高比
          <a-tooltip
            class="item"
            content="该模型宽高以%为单位，请总和不要超过100%"
          >
            <QuestionCircleFilled />
          </a-tooltip>
        </span>
        <div style={{ width: "100%" }}>
          <div class="seniorBox">
            {this.$explain(
              this,
              h,
              this.$store.state.aimAttrs.seniorBoxSize.dom
            )}
          </div>
        </div>
        {this.$store.state.aimAttrs.seniorBoxSize.size.map((item, index) => {
          return (
            <div
              style={{
                "font-size": "14px",
                "line-height": "14px",
                margin: "5px",
                width: "100%",
              }}
            >
              <span>模块{index}</span>
              <div
                style={{
                  display: "flex",
                  "justify-content": "space-evenly",
                  "line-height": "40px",
                  width: "100%",
                }}
              >
                <a-input-number
                  value={item.width}
                  min={10}
                  max={76}
                  formatter={(value) => `${value}%`}
                  parser={(value) => value.replace("%", "")}
                  style={{ width: "100px" }}
                  onChange={(e) => {
                    this.$store.commit("aimAttrsChange", {
                      newValue: {
                        index,
                        type: "width",
                        value: e,
                      },
                      attrsName: "seniorBoxSize",
                      that,
                    });
                  }}
                ></a-input-number>
                <a-icon type="close" style={{ "line-height": "32px" }} />
                <a-input-number
                  value={item.height}
                  min={10}
                  max={76}
                  formatter={(value) => `${value}%`}
                  parser={(value) => value.replace("%", "")}
                  style={{ width: "100px" }}
                  disabled={item.height == "100" ? true : false}
                  onChange={(e) => {
                    this.$store.commit("aimAttrsChange", {
                      newValue: {
                        index,
                        type: "height",
                        value: e,
                      },
                      attrsName: "seniorBoxSize",
                      that,
                    });
                  }}
                ></a-input-number>
              </div>
            </div>
          );
        })}
      </div>
    );
  },
});
</script>
